import { useRef, useState } from 'react';
import { Button, Modal } from 'antd';
import { TextWidget, getMessage } from '@inbiz/react';
import ModalContent from './component/ModalContent';
import styles from './index.less';

const PermissionConfig = (props: any) => {
  // modal显示状态
  const [visible, $visible] = useState<boolean>(false);

  // 绑定子组件提交方法
  const submitRef = useRef<any>();

  // 确认选择
  const submit = () => {
    submitRef.current && submitRef.current.submit && submitRef.current.submit();
  };

  // 关闭modal
  const closeModal = () => {
    $visible(false);
  };

  return (
    <>
      <div className={styles['inbiz-component-permission-config']}>
        <Button type="primary" onClick={() => $visible(true)}>
          <TextWidget>PermissionConfig.configure</TextWidget> {/* 配置 */}
        </Button>
        <Modal
          visible={visible}
          title={getMessage('PermissionConfig.modal_title1')} // 功能配置
          width={900}
          destroyOnClose
          okText={getMessage('global.sure')} // 确认
          cancelText={getMessage('global.cancel')} // 取消
          onCancel={() => $visible(false)}
          onOk={submit}
        >
          <ModalContent {...props} refs={submitRef} close={closeModal} />
        </Modal>
      </div>
    </>
  );
};

export default PermissionConfig;
